<template>
	<view class="content">
		<u-navbar :is-back="false" title="購物車" :background="background" title-color="#FFFFFF"></u-navbar>
		<view class="all">
			<text class="bj" @click="king=!king">{{king?"编辑":'完成'}}</text>
			<view class="carp" v-for="(item,index) in list">
				<view>
					<image @click.stop="chose(item)" style="border-radius: 100%;" src="../../static/img/xz.png"
						class="carp_1" v-if="item.check" />
					<image @click.stop="chose(item)" src="../../static/img/wxz.png" class="carp_1" v-if="!item.check">
					</image>
				</view>
				<image :src="item.logo" class="carp_2" />
				<view class="carp_3">
					<text class="carp_3_1">{{item.goods_name}}</text>
					<text class="carp_3_2">規格：{{item.specs_name}}</text>
					<view class="carp_3_3">
						<text class="text_1"><text class="xiao">¥</text>{{item.goods_price}}</text>
						<view class="carp_3_4">
							<text @click.stop="jian">-</text>
							<text>15</text>
							<text @click.stop="jia">+</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- //删除 -->
		<view class="sahnchu" v-if="!king">
			<view style="width: 20%;display: flex;align-items: center;">
				<image @click="qx" src="../../static/img/xz.png" class="carp_1" v-if="quan" />
				<image @click="qx" src="../../static/img/wxz.png" class="carp_1" v-if="!quan" />
				<text class="yu">全選</text>
			</view>
			<view class="jiesuan">
				删除
			</view>
		</view>
		<view class="foot" v-if="king">
			<image @click="qx" src="../../static/img/xz.png" class="carp_1" v-if="quan" />
			<image @click="qx" src="../../static/img/wxz.png" class="carp_1" v-if="!quan" />
			<text class="yu">全选</text>
			<text>合計:</text>
			<text>
				<text style="font-size: 24rpx;font-weight: bold;color: #AB1E25;">￥</text>
				{{totalPrice}}</text>
			<view class="jiesuan" @click="$to('/pages/shopping/purchase')">
				去下單
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				king: true,
				// totalPrice: '',
				info: {},
				background: {
					backgroundColor: 'rgb(0,121,94)',
				}
			};
		},
		watch: {
			'list': {
				immediate: true,
				deep: true,
				handler(newName, oldName) {

				}
			},
		},
		computed: {
			//是否全选
			quan() {
				let a = this.list.filter(v => {
					return v.check
				})
				if (a.length == this.list.length) {
					return true
				} else {
					return false
				}
			},
			//计算总价
			totalPrice() {
				let data = 0
				this.list.forEach(v => {
					if (v.check == true) {
						data = data + v.goods_price * 1
					}
				})
				return data.toFixed(2)
			},
			//总数据
			list() {
				let a = null
				if (this.$store.state.ziti == 1) {
					a = this.info.simple
				} else {
					a = this.info.multiply
				}
				return a
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			// 点击全选
			qx() {
				if (this.quan) {
					this.list.forEach(v => {
						v.check = false
					})
				} else {
					this.list.forEach(v => {
						v.check = true
					})
				}
			},
			chose(v) {
				if (!v.check) {
					v.check = true
				} else {
					v.check = false
				}
			},
			getinfo() {
				this.api('goods/cartList').then(res => {
					res.data.simple.forEach((v, index) => {
						if (!index) {
							v.check = true
						} else {
							v.check = false
						}
					})
					res.data.multiply.forEach((v, index) => {
						if (!index) {
							v.check = true

						} else {
							v.check = false
						}
					})
					this.info = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.sahnchu,
	.foot {
		bottom: 0rpx;
	}

	.sahnchu {
		padding-left: 30rpx;
		padding-right: 30rpx;
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background: #FFFFFF;

		.yu {
			position: relative;
			font-size: 28rpx;
			font-family: Source Han Serif CN;
			font-weight: 400;
			color: #333333;
		}

		.carp_1 {
			width: 39rpx;
			height: 39rpx;
			// border-radius: 100%;
			margin-right: 20rpx;
		}

		.jiesuan {
			width: 150rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			color: #FFFFFF;
			background: #00795E;
			border-radius: 40px;
		}


	}

	.foot {
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background: #FFFFFF;

		.carp_1 {
			width: 39rpx;
			height: 39rpx;
			border-radius: 100%;
		}

		.jiesuan {
			width: 150rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			color: #FFFFFF;
			background: #00795E;
			border-radius: 40px;
		}

		.yu {
			position: relative;
			left: -40rpx;
			font-size: 28rpx;
			font-family: Source Han Serif CN;
			font-weight: 400;
			color: #333333;
		}

		text:nth-of-type(2) {
			font-size: 24rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			color: #AB1E25;
			position: relative;
			left: -50rpx;
		}

		text:nth-of-type(3) {
			font-size: 40rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			color: #AB1E25;
			position: relative;
			left: -90rpx;
			line-height: 22px;
		}
	}

	.all {
		min-height: 1350rpx;
		background-color: #F4F4F4;

		.carp {
			display: flex;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EDEDED;
			;
			height: 281rpx;
			align-items: center;
			justify-content: space-around;


			.carp_1 {
				width: 39rpx;
				height: 39rpx;
			}

			.carp_2 {
				width: 134rpx;
				height: 148rpx;
			}

			.carp_3 {
				width: 60%;

				.carp_3_1 {
					display: block;
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #181818;

					.text_1 {
						font-size: 20rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #AB1E25;
						line-height: 22px;
					}
				}

				.carp_3_2 {
					display: block;
					font-size: 24rpx;
					margin: 20rpx 0 25rpx 0;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #999999;

					text:nth-of-type(1) {
						width: 58rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background: #F9F9F9;
						border: 1rpx solid #EDEDED;
					}

					text:nth-of-type(2) {
						width: 58rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background: #F9F9F9;
						border: 1rpx solid #EDEDED;
					}

					text:nth-of-type(3) {
						width: 58rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background: #F9F9F9;
						border: 1rpx solid #EDEDED;
					}
				}

				.carp_3_3 {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text_1 {
						.xiao {
							font-size: 24rpx;
							font-family: Source Han Serif CN;
							font-weight: bold;
							color: #AB1E25;
						}

						font-size: 35rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #AB1E25;
					}

					.carp_3_4 {
						display: block;
						font-size: 24rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #999999;

						text:active {
							background: #F9F9F9;
						}

						text:nth-of-type(1) {
							width: 58rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							border: 1rpx solid #EDEDED;
						}

						text:nth-of-type(2) {
							width: 70rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							font-size: 32rpx;
							font-family: Source Han Serif CN;
							font-weight: bold;
							color: #181818;
							border: 1rpx solid #EDEDED;
						}

						text:nth-of-type(3) {
							width: 58rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							border: 1rpx solid #EDEDED;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #00795E;
						}

						text {
							display: inline-block;
						}
					}
				}

			}

		}

		.bj {
			display: block;
			text-align: right;
			margin-right: 30rpx;
			font-size: 28rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			color: #181818;
			line-height: 64rpx;
		}
	}
</style>
